<template>
  <div style="padding: 0 15px">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        :fill="topNav?(!theme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff'):(!topTheme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff')"
        d="M17.2653 11.086C16.868 11.0877 16.4727 11.1427 16.0899 11.2493C13.8275 11.8791 12.4406 14.155 12.9182 16.4544C13.3957 18.7538 15.5741 20.2893 17.9003 19.966C20.2264 19.6428 21.9036 17.5715 21.7361 15.229C21.5686 12.8865 19.6137 11.075 17.2653 11.086ZM16.6792 13.1869C16.6944 13.1717 16.7154 13.1636 16.7369 13.1645L17.8001 13.1645C17.8217 13.1632 17.8428 13.1714 17.8578 13.1869C17.8732 13.2033 17.8813 13.2253 17.8802 13.2478L17.7553 16.1846C17.7521 16.2269 17.7176 16.26 17.6752 16.2615L16.8618 16.2615C16.8194 16.26 16.7849 16.2269 16.7817 16.1846L16.6568 13.2478C16.6557 13.2253 16.6638 13.2033 16.6792 13.1869ZM17.8834 17.645C17.8687 17.7231 17.8321 17.7953 17.7777 17.8532C17.7196 17.9084 17.6457 17.9442 17.5663 17.9557C17.4677 17.9698 17.3681 17.9762 17.2685 17.9749C17.1667 17.9764 17.065 17.9699 16.9642 17.9557C16.8851 17.9436 16.8114 17.9079 16.7529 17.8532C16.6944 17.7965 16.6561 17.7223 16.644 17.6418C16.6183 17.4419 16.6183 17.2396 16.644 17.0397C16.6561 16.9592 16.6944 16.885 16.7529 16.8283C16.8122 16.7749 16.8855 16.7394 16.9642 16.7258C17.065 16.7116 17.1667 16.7051 17.2685 16.7066C17.3681 16.7053 17.4677 16.7117 17.5663 16.7258C17.7344 16.7455 17.867 16.878 17.8866 17.0461C17.9037 17.1444 17.9112 17.2442 17.909 17.344C17.9098 17.4449 17.9012 17.5457 17.8834 17.645Z"
        fill-rule="evenodd"
        fill-opacity="0.8"
      ></path>
      <path
        :fill="topNav?(!theme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff'):(!topTheme.includes('2e3c56')? 'rgba(44, 78, 120, 1)' : '#fff')"
        d="M19.8325 3.99023L2.82647 3.99023C2.50941 3.99023 2.25 4.24965 2.25 4.56671L2.25 9.66852C2.25 9.98559 2.50941 10.245 2.82647 10.245L19.8613 10.245C20.1784 10.245 20.4378 9.98559 20.4378 9.66852L20.4378 4.53789C20.4089 4.22082 20.1495 3.99023 19.8325 3.99023ZM5.96826 8.22733C5.33414 8.22733 4.84413 7.7085 4.84413 7.10321C4.84413 6.49791 5.36296 5.97908 5.96826 5.97908C6.60238 5.97908 7.09238 6.49791 7.09238 7.10321C7.09238 7.7085 6.60238 8.22733 5.96826 8.22733ZM17.6707 8.22733L9.74417 8.22733C9.11004 8.22733 8.62004 7.7085 8.62004 7.10321C8.62004 6.49791 9.13887 5.97908 9.74417 5.97908L17.6707 5.97908C18.3048 5.97908 18.7948 6.49791 18.7948 7.10321C18.7948 7.7085 18.3048 8.22733 17.6707 8.22733ZM9.74417 16.4709C9.11004 16.4709 8.62004 15.9521 8.62004 15.3468C8.62004 14.7415 9.13887 14.2227 9.74417 14.2227L11.7907 14.2227C12.0212 13.4733 12.4536 12.7815 12.9724 12.2338L2.82647 12.2338C2.50941 12.2338 2.25 12.4933 2.25 12.8103L2.25 17.8833C2.25 18.2004 2.50941 18.4598 2.82647 18.4598L12.3383 18.4598C11.9636 17.8545 11.7042 17.1915 11.6177 16.4709L9.74417 16.4709ZM5.96826 16.4709C5.33414 16.4709 4.84413 15.9521 4.84413 15.3468C4.84413 14.7415 5.36296 14.2227 5.96826 14.2227C6.60238 14.2227 7.09238 14.7415 7.09238 15.3468C7.09238 15.9521 6.60238 16.4709 5.96826 16.4709Z"
        fill-rule="evenodd"
        fill-opacity="0.8"
      ></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
// const toggleClick = () => {
//   emit('toggleClick');
// }
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
